import React    from 'react';
import ReactDOM from 'react-dom';
import ComButton from '../combutton/combutton';
import './modal.scss';

const { PropTypes, Component} = React;
const propTypes = {
    width           : PropTypes.number,
    height          : PropTypes.number,
    visible         : PropTypes.bool,
    showMask        : PropTypes.bool,
    showCloseIcon   : PropTypes.bool,
    duration        : PropTypes.number,
    header          : PropTypes.bool,
    title           : PropTypes.string,
    animation       : PropTypes.string,
    showCancelButton: PropTypes.bool,
    cancelText      : PropTypes.string,
    comfirmText     : PropTypes.string
};
const defaultProps = {
    width           : 400,
    height          : 240,
    visible         : false,
    showMask        : true,
    showCloseIcon   : true,
    duration        : 300,
    header          : true,
    title           : 'Modal title',
    animation       : 'fade',//支持6种动画：fade,zoom,slideDown,slideLeft,slideRight,slideUp
    isShowButton    : true,
    cancelText      : '取消',
    comfirmText     : '确认'
};

const Dialog = props => {
    const className = `rodal-dialog rodal-${props.animation}-${props.animationType}`;
    const CloseButton = props.showCloseIcon ? <span className="rodal-close" onClick={props.onClose} /> : null;
    const { width, height, duration,cancelText,comfirmText,isShowButton} = props;
    const style = {
        width                   : width + 'px',
        height                  : height + 'px',
        marginTop               : - height / 2 + 'px',
        marginLeft              : - width / 2 + 'px',
        animationDuration       : duration + 'ms',
        WebkitAnimationDuration : duration + 'ms'
    };
    const header = props.header ? <div className="rodal-header">{props.title}</div> : null;
    const modalfootButton = props.isShowButton 
                    ?   <div className="rodal-bottom-btn">
                            <div className="rodal-confirm-btn" onClick={props.onComfirm}><button className='primary'>{props.comfirmText}</button></div>
                            <div className="rodal-cancel-btn" onClick={props.onClose}><button className='secondary'>{props.cancelText}</button></div>
                        </div>  
                    :   '';

    return (
        <div style={style} className={className}>
            {header}
            {CloseButton}
            {props.children}
            {modalfootButton}
        </div>
    )
};

//弹框组件
class Modal extends Component {
    constructor(props) {
        super(props);

        this.animationEnd = this.animationEnd.bind(this);
        this.state = {
            isShow        : false,
            animationType : 'leave'
        };
    }
    componentDidMount() {
        if (this.props.visible) {
            this.enter();
        }
    }

    componentWillReceiveProps(nextProps) {
        if (!this.props.visible && nextProps.visible) {
            this.enter();
        } else if (this.props.visible && !nextProps.visible) {
            this.leave();
        }
    }

    enter() {
        this.setState({
            isShow: true,
            animationType: 'enter'
        });
    }

    leave() {
        this.setState({
            animationType: 'leave'
        });
    }

    animationEnd() {
        if (this.state.animationType === 'leave') {
            this.setState({
                isShow: false
            });
        }
    }
    onClose() {
    this.setState({isShow: false});
  }

   render() {
        let mask = this.props.showMask ? <div className="rodal-mask"/> : null;
        let style = {
            display                 : this.state.isShow ? 'block' : 'none',
            WebkitAnimationDuration : this.props.duration + 'ms',
            animationDuration       : this.props.duration + 'ms'
        };

        return (
            <div style={style} className={"rodal rodal-fade-" + this.state.animationType} onAnimationEnd={this.animationEnd}>
                {mask}
                <Dialog {...this.props} animationType={this.state.animationType}>
                    {this.props.children}
                </Dialog>
            </div>
        )
    }
}
Modal.propTypes = propTypes;
Modal.defaultProps = defaultProps;


// //弹框的内容
// class Modalbody extends Component {
//     constructor(props) {
//         super(props);
//     }
//     render(){
//          return (
//             <div className="body">modal12 body</div>
//         )
        
//     }

// }
//底部按钮组件
// class Modalfoot extends Component {
//     constructor(props) {
//         super(props);
//     }
//     render(){
//          const modalfootButton = this.props.showCancelButton 
//                     ?   <div className="rodal-bottom-btn">
//                             <div className="rodal-confirm-btn" onClick={this.props.onComfirm}><ComButton klass={'primary'} text={'确认'}></ComButton></div>
//                             <div className="rodal-cancel-btn" onClick={this.props.onClose}><ComButton klass={'secondary'} text={'取消'}></ComButton></div>
//                         </div>  
//                     :   <div className="rodal-bottom-btn"> 
//                             <div className="rodal-confirm-btn" onClick={this.props.onComfirm}><ComButton klass={'primary'} text={'确认'}></ComButton></div>
//                         </div>;
//          return (               
//                 <div className="bottom">{modalfootButton}</div>          
//         )
        
//     }

// }
// Modalfoot.propTypes = propTypesFoot;
// Modalfoot.defaultProps = defaultPropsFoot;
// export {Modal,Modalbody,Modalfoot};
export default Modal;